<template>
  <div class="jingtiao">
    <el-tooltip :open-delay="1000" placement="left">
      <div slot="content">
        <span class="content_title">设备名称：</span>
        {{ id > 99 ? '头并条机' + (id - 100) : '末并条机' + id }}
        <br />
        <span class="content_title">设备状态：</span>
        {{ getHeadName(data.stateCode) }}
        <br />
        <span class="content_title">设备效率：</span>
        {{ data.xiaolv }}%
        <br />
        <span class="content_title">生产品种：</span>
        R30SAA-1
        <br />
        <span class="content_title">更新时间：{{ data.time }}</span>
      </div>
      <div class="jingtiao-content" v-if="inline">
        <div class="jingtiao-xiaolv">
          {{ xiaolv + '%' }}
        </div>
        <svg
          width="40px"
          height="21px"
          viewBox="0 0 40 21"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <g
            id="大屏"
            stroke="none"
            stroke-width="1"
            fill="none"
            fill-rule="evenodd"
          >
            <g id="首页" transform="translate(-1436.000000, -183.000000)">
              <g id="短左边" transform="translate(1437.000000, 183.000000)">
                <text
                  id="1"
                  font-family="PingFang-SC-Medium, PingFang SC"
                  font-size="8"
                  font-weight="400"
                  line-spacing="10"
                  letter-spacing="-0.5"
                  fill="#FFFFFF"
                >
                  <tspan x="23" y="8">
                    {{ id > 99 ? id - 100 : id }}
                  </tspan>
                </text>
                <rect
                  id="矩形备份-81"
                  stroke="#8FCDFA"
                  x="31"
                  y="9"
                  width="4"
                  height="7"
                ></rect>
                <rect
                  id="矩形备份-87"
                  stroke="#8FCDFA"
                  :style="bodyStyle"
                  x="2"
                  y="11"
                  width="36"
                  height="3"
                ></rect>
                <path
                  d="M14,5 C14.5522847,5 15,5.44771525 15,6 L15,6 L15.0005342,9.02774252 C14.8919631,9.00949739 14.780424,9 14.6666667,9 L14.6666667,9 L14.5,9 C13.3954305,9 12.5,9.8954305 12.5,11 L12.5,11 L12.5,14 C12.5,15.1045695 13.3954305,16 14.5,16 L14.5,16 L14.6666667,16 C14.780424,16 14.8919631,15.9905026 15.0005342,15.9722575 L15,19 C15,19.5522847 14.5522847,20 14,20 L14,20 L-6.48370246e-14,20 L-6.48370246e-14,5 Z"
                  id="形状结合备份-36"
                  stroke="#8FCDFA"
                  :style="headStyle"
                ></path>
              </g>
            </g>
          </g>
        </svg>
      </div>
      <svg
        v-else
        width="40px"
        height="21px"
        viewBox="0 0 40 21"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
      >
        <g
          id="大屏"
          stroke="none"
          stroke-width="1"
          fill="none"
          fill-rule="evenodd"
        >
          <g id="首页" transform="translate(-1436.000000, -183.000000)">
            <g id="短左边" transform="translate(1437.000000, 183.000000)">
              <text
                id="1"
                font-family="PingFang-SC-Medium, PingFang SC"
                font-size="8"
                font-weight="400"
                line-spacing="10"
                letter-spacing="-0.5"
                fill="#FFFFFF"
              >
                <tspan x="23" y="8">
                  {{ id > 99 ? id - 100 : id }}
                </tspan>
              </text>
              <rect
                id="矩形备份-81"
                stroke="#8FCDFA"
                x="31"
                y="9"
                width="4"
                height="7"
              ></rect>
              <rect
                id="矩形备份-87"
                stroke="#8FCDFA"
                :style="bodyStyle"
                x="2"
                y="11"
                width="36"
                height="3"
              ></rect>
              <path
                d="M14,5 C14.5522847,5 15,5.44771525 15,6 L15,6 L15.0005342,9.02774252 C14.8919631,9.00949739 14.780424,9 14.6666667,9 L14.6666667,9 L14.5,9 C13.3954305,9 12.5,9.8954305 12.5,11 L12.5,11 L12.5,14 C12.5,15.1045695 13.3954305,16 14.5,16 L14.5,16 L14.6666667,16 C14.780424,16 14.8919631,15.9905026 15.0005342,15.9722575 L15,19 C15,19.5522847 14.5522847,20 14,20 L14,20 L-6.48370246e-14,20 L-6.48370246e-14,5 Z"
                id="形状结合备份-36"
                stroke="#8FCDFA"
                :style="headStyle"
              ></path>
            </g>
          </g>
        </g>
      </svg>
    </el-tooltip>
  </div>
</template>

<script>
import { mul } from '@/utils/caculate';
export default {
  name: 'jingtiao_l',
  props: {
    data: Object,
    // 是否嵌套在弹窗内
    inline: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      headStyle: {
        fill: ''
      },
      bodyStyle: {
        fill: ''
      },
      id: '',
      xiaolv: ''
    };
  },
  watch: {
    data: {
      deep: true, //true 深度监听
      immediate: true,
      handler(val) {
        this.draw();
      }
    }
  },

  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      this.headStyle.fill = this.getHeadColor(this.data.stateCode);
      this.bodyStyle.fill = this.getBodyColor(this.data.xiaolv);
      this.id = this.data.devSn;
      this.xiaolv = mul(this.data.xiaolv, 100);
    },
    //尾灯表示车台状态（运行、停止、故障、满纱满桶、通讯失败)
    getHeadColor(status) {
      switch (parseInt(status)) {
        //运行
        case 1:
          return '#7CBC44';
        //停止
        case 2:
          return '#888F93';
        //故障
        case 3:
          return '#6D000E';
        //满纱满桶
        case 4:
          return '#ECCD54';
        //通讯失败
        case 5:
          return '#EB4E27';
      }
    },
    //尾灯表示车台状态（运行、停止、故障、满纱满桶、通讯失败)
    getHeadName(status) {
      switch (parseInt(status)) {
        //运行
        case 1:
          return '运行';
        //停止
        case 2:
          return '停止';
        //故障
        case 3:
          return '故障';
        //满纱满桶
        case 4:
          return '满纱满桶';
        //通讯失败
        case 5:
          return '通讯失败';
      }
    },
    //车身颜色渐变表示车台当前效率范围
    getBodyColor(status1) {
      let status = status1 * 100;
      if (status > 90) {
        return '#5599FE';
      } else if (90 >= status > 70) {
        return '#F9CA1E';
      } else if (70 >= status > 50) {
        return '#F56041';
      } else if (status <= 50) {
        return '#D9001B';
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.cls-1,
.cls-2,
.cls-3,
.cls-5 {
  stroke: #82c4fa;
  stroke-width: 2px;
}

.cls-1 {
  fill-rule: evenodd;
  fill: url(#linear-gradient);
}

.cls-2 {
  fill: none;
}

.cls-3 {
  fill: #276ca7;
}

.cls-4 {
  font-size: 26px;
  fill: #fff;
  font-family: 'Microsoft YaHei';
  font-weight: 700;
}

.cls-5 {
  fill: #519aff;
}
.jingtiao-content {
  position: relative;
}
.jingtiao-xiaolv {
  font-size: 10px;
  font-weight: 400;
  color: #fff;
  transform: scale(0.7);
  position: absolute;
  white-space: nowrap;
  left: -34px;
  top: 4px;
  width: 32px;
  text-align: right;
}
</style>
